<template>
  <div class="labelProjectDetail">
    <bread-crumb :data="dataList" :crumbTitle="crumbTitle" backPath='/dimensioning/project'></bread-crumb>
    <div class="content-detail">
      <el-steps
        class="xm-steps"
        :active="stepsActive - 1"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step class="step1" title="任务基本信息"></el-step>
        <el-step class="step2" title="添加数据"></el-step>
        <el-step class="step3" title="标注人员"></el-step>
        <el-step class="step4" title="完成"></el-step>
      </el-steps>

      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>

      <div
        :style="{
          width: '100%',
          height: '70px',
          backgroundColor: stepsActive < 4 ? '#f5f5f5' : '#fff',
        }"
      ></div>
      <div class="buttons" v-show="stepsActive < 4">
        <el-button v-show="stepsActive < 4" @click="cancelAndBack"
          >取消并返回</el-button
        >
        <el-button
          v-show="stepsActive > 1 && stepsActive < 4"
          @click="prevStep"
          type="primary"
          >上一步</el-button
        >

        <el-button
          v-show="isEdit && stepsActive < 4"
          @click="editSave"
          type="primary"
          >保存提交</el-button
        >

        <el-button v-show="stepsActive < 3" @click="nextStepWrap" type="primary"
          >下一步</el-button
        >
        <el-button
          v-show="isCreate && currentComponent == Step.labelStaff"
          @click="nextStepWrap"
          type="primary"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import breadCrumb from '@/components/bread-crumb/bread-crumb.vue';
import labelStaff from './components/labelStaff.vue';
import projectConfig from './components/projectConfig.vue';
import addData from './components/addData.vue';
import created from './components/created.vue';
import bus from '@/utils/bus';
import { PageType, Step } from '@/utils/emun';
import { getUrlParams } from '@/utils/window';
import {
  removeLocalStorage,
  setLocalStorage,
  getLocalStorage,
} from '@/utils/storage';
import router from '@/router';
export default {
  components: {
    breadCrumb,
    labelStaff,
    projectConfig,
    addData,
    created,
  },
  data() {
    const {
      step = Step.projectConfig,
      projectId,
      projectStatus,
    } = getUrlParams();
    const componentList = [
      Step.projectConfig,
      Step.addData,
      Step.labelStaff,
      Step.created,
    ];
    return {
        Step,
        pageType: projectId?.length === 16 ? PageType.create : PageType.edit,
        projectId,
        componentList,
        currentComponent: step,
        dataList: [],
        crumbTitle: "",
        stepsActive: componentList.findIndex((item) => item === step) + 1,
    };
  },
  watch: {
    model: {
      handle(){

      },
      deep: true
    },
    $route(to){
      if( to.name !== "projectDetail" || to.path !== "/dimensioning/projectDetail" ){
        removeLocalStorage("DRAFT");
      }
    }
  },
  computed: {
    isCreate() {
      return this.pageType === PageType.create;
    },
    isEdit() {
      return this.pageType === PageType.edit;
    },
    isView() {
      return this.pageType === PageType.view;
    },
  },
  async created() {
    this.setCrumbData();

    bus.off(`labelProject.valid`);
    bus.on(`labelProject.valid`, (params) => {
      this.nextStep(params);
    });

    bus.off(`labelProject.goCreated`);
    bus.on(`labelProject.goCreated`, this.goCreated);
  },
  methods: {
    goCreated(queryOther){
      const query = this.getRouteQuery(queryOther);
      router.push({
        path: '/dimensioning/projectDetail',
        query: {
          ...query,
          step: Step.created
        }
      });
    },
    setCrumbData(){
      const pageTypeText = PageType[this.pageType +'Text'];
      const projectTypetext = "标注"; 
      this.dataList = [
        { title: projectTypetext + '任务' },
        { title: pageTypeText + projectTypetext + '任务' },
      ];
      this.crumbTitle = pageTypeText + projectTypetext + '任务';
    },
    nextStepWrap(){
      bus.emit(`labelProject.${this.currentComponent}`);
    },
    editSave(){
      bus.emit(`labelProject.editSave.${this.currentComponent}`);
    },
    nextStep(queryOther) {
      const step = this.componentList[this.stepsActive];
      const query = this.getRouteQuery(queryOther);
      router.push({
        path: '/dimensioning/projectDetail',
        query: {
          ...query,
          step
        }
      });
    },
    prevStep() {
      const step = this.componentList[this.stepsActive-2];
      const query = this.getRouteQuery();
      router.push({
        path: '/dimensioning/projectDetail',
        query: {
          ...query,
          step
        }
      });
    },
    getRouteQuery(queryOther={}){
      const query = this.$router.currentRoute.value.query;
      return {
        ...query,
        ...queryOther
      }
    },
    cancelAndBack(){
      this.$confirm('返回将不保存编辑内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeLocalStorage("DRAFT");
          router.push({
            path: '/dimensioning/project',
          });
        });
    },
  },
};
</script>


<style lang="less">
.labelProjectDetail {
  background: #fff;
  min-height: calc(~'100vh - 150px');
  .content-detail {
    background: #f5f5f5;
    padding: 16px;
    box-sizing: border-box;
    height: calc(~'100vh - 150px');
    overflow: auto;
    & > .content {
      min-height: calc(~'100vh - 354px');
      background: #fff;
      padding-bottom: 16px;
      box-sizing: border-box;
    }
  }
  .el-form {
    margin-left: 0 !important;
    .el-form-item__label {
      color: #333;
      line-height: 32px;
    }
    .el-form-item__content {
      line-height: 32px;
    }
    .el-input__icon {
      line-height: 32px;
    }
    .el-input {
      input {
        height: 32px;
      }
    }
  }
  .el-step.is-simple {
    .el-step__arrow::before {
      height: 1px !important;
    }
    .el-step__head {
      .el-step__icon {
        background: #cccccc;
        width: 32px;
        height: 32px;
        border: none;
        font-size: 14px;
        color: #fff;
        .el-icon-check:before {
          display: none;
        }
      }
      &.is-process {
        .el-step__icon {
          background: #448e97;
          border: 6px solid #ecf4f5;
          width: 42px;
          height: 42px;
        }
      }
    }
    .el-step__title.is-process {
      color: #000;
    }
    .el-step__arrow::before {
      content: '';
      width: 55%;
      height: 2px;
      background: #c6c6c6;
      transform: rotate(0) translateY(0);
    }
    .el-step__arrow::after {
      display: none;
    }
  }
  .el-step__title.is-process {
    color: #c0c4cc;
  }

  .el-step.step1 {
    .el-step__icon::before {
      content: '1';
    }
  }
  .el-step {
    .el-step__head.is-success {
      .el-step__icon {
        background: #fff;
        border: 3px solid #448e97;
        justify-content: center;
        align-items: center;
        &::before {
          content: '✓';
          color: #448e97;
          font-size: 16px;
          font-weight: bold;
        }
        .el-icon{
          display:none
        }
      }
    }
    .el-step__main {
      .el-step__title.is-success {
        color: #448e97;
        & + .el-step__arrow {
          &::before {
            background: #448e97;
          }
        }
      }
    }
    .el-step__title {
      font-size: 18px;
    }
  }

  .el-steps {
    background: #fff;
    height: 108px;
    padding: 0 10.5%;
    margin-top: 0 !important;
  }
  .el-step.step2 {
    .el-step__icon::before {
      content: '2';
    }
  }
  .el-step.step3 {
    .el-step__icon::before {
      content: '3';
    }
  }
  .el-step.step4 {
    .el-step__icon::before {
      content: '4';
    }
  }

  .buttons {
    width: 100%;
    padding: 15px 40px;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.1);
  }

  .el-table tbody tr td {
    text-align: left !important;
  }
}
</style>
